@use "@layouts/styles/mixins" as layoutsMixins;
@use "@core/scss/base/variables";
@use "@layouts/styles/placeholders";
@use "@core/scss/base/mixins";

// 水平导航栏导航项样式（包括导航组子项）
%horizontal-nav-item {
  padding-block: 0.6rem;
  padding-inline: 1rem;
}

// 水平导航栏顶层项样式（a 标签和组标签）
%horizontal-nav-top-level-item {
  border-radius: 0.4rem;
}

// 水平导航栏导航链接活动状态样式
%horizontal-nav-sub-nav-link-active {
  background: rgba(var(--v-theme-primary), 0.1);
  color: rgb(var(--v-theme-primary));
}

// 水平导航项使用过渡效果时此样式注释
// 当使用 themeConfig.horizontalNav.transition 为 false（水平导航项提供过渡效果时），请取消注释以下 CSS
// 水平导航栏下拉列表隐藏时样式
%horizontal-nav-popper-content-hidden {
  // display: none;

  // opacity: 0;
  // pointer-events: none;
  // transform: translateY(7px);
  // transition: transform 0.25s ease-in-out, opacity 0.15s ease-in-out;
}

// 水平导航项使用过渡效果时此样式注释
// 当使用 themeConfig.horizontalNav.transition 为 false（水平导航项提供过渡效果时），请取消注释以下 CSS
// 水平导航栏下拉列表显示时样式
%horizontal-nav-popper-content-visible {
  // display: block;

  // opacity: 1;
  // pointer-events: auto;
  // pointer-events: auto;
  // transform: translateY(0);
}

// 水平导航栏导航项图标（包括导航组子项图标）
%horizontal-nav-item-icon {
  font-size: variables.$horizontal-nav-items-icon-size;
  margin-inline-end: variables.$horizontal-nav-items-icon-margin-inline-end;
}

// 水平导航栏子项样式
%horizontal-nav-subitem {
  min-inline-size: 12rem;

  .nav-item-title {
    margin-inline-end: 1rem;
  }
}

/// 水平导航栏三级嵌套的导航链接（顶层组 > 子组 > 导航链接）中图标的大小
%third-level-nav-item-icon {
  font-size: variables.$horizontal-nav-third-level-icon-size;
  margin-inline-end: 0.75rem;

  // 图标边距 margin-inline 为（正常图标字体大小 - 小图标字体大小）/ 2
  margin-inline-start: calc((variables.$horizontal-nav-items-icon-size - variables.$horizontal-nav-third-level-icon-size) / 2);
}

// 水平导航栏导航项标题
%horizontal-nav-item-title {
  margin-inline-end: 0.3rem;
  white-space: nowrap;
}

// 水平导航栏下拉列表样式
%horizontal-nav-popper-content {
  @include mixins.elevation(4);

  border-radius: 6px;
  padding-block: 0.3rem;

  > div {
    @extend %style-scroll-bar;
  }
}
